<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="flex flex-col w-full h-full overflow-hidden p-4 bg-white">
        <div class="grow overflow-auto">
          <a-form :model="formData">
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="资产规划："
                  field="asset_planning"
                  :label-col-props="{ span: 6 }"
                  :wrapper-col-props="{ span: 18 }"
                  required
                >
                  <a-radio-group v-model="formData.asset_planning">
                    <a-radio value="无形资产">无形资产</a-radio>
                    <a-radio value="存货">存货</a-radio>
                    <a-radio value="可披露">可披露</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item
                  label="使用寿命："
                  field="useful_life"
                  :label-col-props="{ span: 12 }"
                  :wrapper-col-props="{ span: 10 }"
                  required
                >
                  <a-select v-model="formData.useful_life">
                    <a-option v-for="item in serviceLifeOption" :key="item.value" :value="item.key">
                      {{ item.label }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6"> </a-col>
              <a-col :span="6">
                <a-form-item
                  label="计算公式："
                  field="calculation_type"
                  :label-col-props="{ span: 12 }"
                  :wrapper-col-props="{ span: 10 }"
                >
                  <a-select v-model="formData.calculation_type">
                    <a-option v-for="item in countFormulaOption" :key="item.value" :value="item">
                      {{ item.label }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="判断依据："
                  field="description"
                  :label-col-props="{ span: 6 }"
                  :wrapper-col-props="{ span: 8 }"
                  required
                >
                  <a-textarea v-model="formData.description" :auto-size="false" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item
                  label="摊销频次："
                  field="amortization_frequency"
                  :label-col-props="{ span: 12 }"
                  :wrapper-col-props="{ span: 10 }"
                  required
                >
                  <a-select v-model="formData.amortization_frequency">
                    <a-option v-for="item in amortizePcOption" :key="item.value" :value="item">
                      {{ item.label }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  label="摊销开始时间："
                  field="amortization_time_start"
                  :label-col-props="{ span: 12 }"
                  :wrapper-col-props="{ span: 10 }"
                >
                  <a-date-picker
                    v-model="formData.amortization_time_start"
                    type="date"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  label="摊销时间点："
                  field="amortization_time_point"
                  :label-col-props="{ span: 12 }"
                  :wrapper-col-props="{ span: 10 }"
                >
                  <a-input v-model.trim="formData.amortization_time_point" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div>
            <div class="font-bold text-lg text-[#394D73] my-2">摊销计划</div>
            <div class="my-2 mb-4">
              <a-button type="primary">生成计划</a-button>
            </div>
            <ModifyTable :tableData="tableData" />
          </div>
        </div>
        <div class="h-[80px] flex items-center justify-end shrink-0">
          <a-button type="primary" class="mr-4" @click="handleConfirmEvent">确定</a-button>
          <a-button class="mr-4" @click="handleCancelEvent">取消</a-button>
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import PageMain from '@/components/PageBox.vue';
import { serviceLifeOption, countFormulaOption, amortizePcOption } from './defaultOptions';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import ModifyTable from './ModifyTable.vue';

const router = useRouter();

// formData
const formData = reactive({
  asset_planning: '无形资产',
  calculation_type: '',
  useful_life: '',
  description: '',
  amortization_time_start: '',
  amortization_time_point: '',
  amortization_frequency: ''
});

const tableData = reactive([
  {
    belong_cycle: '2025',
    cycle_number: 1,
    amount: '0',
    cycle_start_time: '2025-01-12'
  },
  {
    belong_cycle: '2026',
    cycle_number: 2,
    amount: '0',
    cycle_start_time: '2026-01-12'
  },
  {
    belong_cycle: '2027',
    cycle_number: 3,
    amount: '0',
    cycle_start_time: '2027-01-12'
  },
  {
    belong_cycle: '2028',
    cycle_number: 4,
    amount: '0',
    cycle_start_time: '2028-01-12'
  },
  {
    belong_cycle: '2029',
    cycle_number: 5,
    amount: '0',
    cycle_start_time: '2029-01-12'
  },
  {
    belong_cycle: '2030',
    cycle_number: 6,
    amount: '0',
    cycle_start_time: '2030-01-12'
  }
]);

// 确定
const handleConfirmEvent = () => {
  router.push({
    name: 'amortize'
  });
};
// 取消
const handleCancelEvent = () => {
  router.push({
    name: 'amortize'
  });
};
</script>
